<script setup>
import TreeSelectorDept from '@/components/TreeSelectorDept.vue';
import { h,ref } from 'vue';
import  { PlusOutlined  } from '@ant-design/icons-vue';
import {DeleteOutlined, HighlightOutlined,ClusterOutlined} from "@ant-design/icons-vue";
import roleAdd from './roleAdd.vue';
import roleEdit from './roleEdit.vue';
import webConfig from '@/GlobalParas';
import axios from 'axios';
import { message } from 'ant-design-vue';
const nodeClick = (nodeData)=>{
    console.log(nodeData.key)
    deptId.value= nodeData.key
    getRoleInfo()
}
const getRoleInfo = ()=>{
    let url = webConfig.postUrl + '/role/getRoleAndFunByDeptId'
    axios.post(url, { deptId: deptId.value }).then(res => {
        // console.log(res.data)
        dataSource.value = res.data
        // console.log(res.data)
    })
}
const columns = [
{
    title:'角色名',
    dataIndex:'role_name',
    width:'150px'
},
{
    title: '权限',
    key: 'roleFunctions',
    dataIndex: 'roleFunctions',
    ellipsis: true,
},
{
    title:'操作',
    dataIndex: 'action',
    key: 'action',
    width:'225px'
}
];
const flag=ref(0);
const deptId =ref('1');
const isOpenWin = ref(false);
const isEditOpenWin = ref(false);
const dataSource = ref([]);
const roleRecordObj =ref(null);
getRoleInfo()
const handleAddRole = ()=>{
    isOpenWin.value=true;
}
const handleEditRole = (role)=>{
    isEditOpenWin.value=true
    // console.log(role);
    roleRecordObj.value={...role}
}
const delRole = (a,role)=>{
    // console.log(a);
    // console.log(role);
     let url = webConfig.postUrl + '/role/delRoleById';
    axios.post(url,{TableKey:role.TableKey}).then(res=>{
        if(res.data =="success"){
            message.success("删除成功")
            isOpenWin.value=false;
            getRoleInfo()
        }else{
            message.error(res.data);
        }
    })
}
const addRole = (role,checkedKeys)=>{
    // console.log(role);
    // console.log(checkedKeys);
    role.deptId = deptId.value
    const role_function = Object.values(checkedKeys)
    .map(check=>{
        return{
            tableKey:crypto.randomUUID(),
            functionId:check,
            roleId:role.tableKey
        }
    })
    // console.log(role_function);
    let url = webConfig.postUrl + '/role/addRoleAndFun';
    axios.post(url,{role:role,roleFunctions:role_function},{headers:{'Content-Type':'application/json'}}).then(res=>{
        if(res.data =="success"){
            message.success("添加成功")
            isOpenWin.value=false;
            getRoleInfo()
        }else{
            message.error(res.data);
        }
    })

}
const editRole = (role,checkedKeys)=>{
    if(flag.value === 0){//判断用户是否有更改过权限树 
        let url = webConfig.postUrl + '/role/editRole';
        axios.post(url, role , { headers: { 'Content-Type': 'application/json' } }).then(res => {
            if (res.data == "success") {
                message.success("编辑成功")
                isEditOpenWin.value = false;
                flag.value = 0;
                getRoleInfo()
            } else {
                message.error(res.data);
            }
        })
    }else{
        const role_function = Object.values(checkedKeys)
            .map(check => {
                return {
                    tableKey: crypto.randomUUID(),
                    functionId: check,
                    roleId: role.tableKey
                }
            })
        let url = webConfig.postUrl + '/role/editRoleAndFun';
        axios.post(url, { role: role, roleFunctions: role_function }, { headers: { 'Content-Type': 'application/json' } }).then(res => {
            if (res.data == "success") {
                message.success("编辑成功")
                isEditOpenWin.value = false;
                flag.value = 0;
                getRoleInfo()
            } else {
                message.error(res.data);
            }
        })
    }
    // console.log("a",role);
    // console.log("b",checkedKeys);
}
</script>

<template>
    <div class="role-layout">
        <a-modal v-model:open="isOpenWin" title="添加角色" width="520px" :footer="null">
            <role-add @addInfo="addRole"></role-add>
        </a-modal>
        <a-modal v-model:open="isEditOpenWin" title="编辑角色" width="520px" :footer="null">
            <role-edit @editInfo="editRole" :roleObj_props="roleRecordObj" v-model="flag"></role-edit>
        </a-modal>
        <div class="role-left">
            <tree-selector-dept @treeNodeClick="nodeClick" />
        </div>
        <div class="role-right">
            <div class="role-right-top">
                <a-button type="primary" :icon="h(PlusOutlined)"
                    style="margin-top: 10px;margin-left: 10px;font-size: 15px;" @click="handleAddRole">添加角色</a-button>
            </div>
            <div class="role-right-bottom">
                <a-table :columns="columns" :data-source="dataSource" :style="{ width: '100%' }" :pagination="false">
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.dataIndex === 'roleFunctions'">
                            <span>
                                <a-tag v-for="rolefun in record.roleFunctions" :key="rolefun.TableKey"
                                    :color="rolefun.function_id.length > 3 ? 'green' : 'geekblue'">
                                    {{ rolefun.functionName }}
                                </a-tag>
                            </span>
                        </template>
                        <template v-if="column.key === 'action'">
                            <a-button type="primary" @click="handleEditRole(record)"
                                style="margin-left: 5px;margin-right: 5px;">
                                <HighlightOutlined />编辑
                            </a-button>
                            <a-popconfirm title="角色删除后，拥有此角色的用户将丢失该角色。是否继续？" ok-text="确定" cancel-text="取消"
                                @confirm="eventObj => delRole(eventObj, record)">
                                <a-button type="primary" danger>
                                    <DeleteOutlined />删除
                                </a-button>
                            </a-popconfirm>
                        </template>
                    </template>
                </a-table>
            </div>
        </div>
    </div>
</template>

<style scoped>
.role-layout {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}

.role-left {
    width: 300px;
    height: 100%;
    background-color: white;
    border-right: 1px dashed #afafaf;
}

.role-right {
    display: flex;
    flex: 1;
    flex-direction: column;
    background-color: white;
}

.role-right-top {
    height: 50px;
    width: 100%;
    border-bottom: 2px solid #dddddd;
}

.role-right-bottom {
    display: flex;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
}
</style>